<script lang="ts" setup>
import { computed, reactive, ref } from 'vue';

import { Page } from '#/components/page';

const tabList = ref([
  { label: '登录日志', value: 'login' },
  { label: '操作日志', value: 'operate' },
  { label: '慢SQL日志', value: 'slowSql' },
]);

const searchParams = reactive<any>({
  type: tabList.value[0]?.value,
});

const tabInfo = computed(() => {
  return tabList.value.find((d) => d.value === searchParams.type);
});

function handleTabChange(type) {
  searchParams.type = type;
}
</script>

<template>
  <Page content-class="h-full">
    <a-row :gutter="[12, 0]" class="h-full">
      <a-col :span="4" class="h-full">
        <div class="h-full w-full rounded-lg bg-white p-2">
          <a-list
            :bordered="false"
            :data-source="tabList"
            item-layout="horizontal"
            size="small"
          >
            <template #renderItem="{ item }">
              <a-list-item
                :class="{ active: searchParams.type === item.value }"
                class="list-item h-[42px] cursor-pointer"
                @click="handleTabChange(item.value)"
              >
                <a-list-item-meta>
                  <template #title>
                    <span> {{ item.label }}</span>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </div>
      </a-col>

      <a-col :span="20" class="h-full">
        <div class="flex h-full flex-1 flex-col">
          <Grid ref="gridRef" :table-title="tabInfo?.label">
            <template #toolbar-tools>
              <a-space>
                <a-button
                  :disabled="selectedRows.length === 0"
                  danger
                  type="primary"
                  @click="handleDelete(selectedRows[0])"
                >
                  批量删除
                </a-button>
              </a-space>
            </template>

            <template #avatar="{ row }">
              <div class="flex h-full w-full rounded-full">
                <a-image :height="48" :src="row.avatar" :width="60" />
              </div>
            </template>

            <template #roles="{ row }">
              <a-tag
                v-for="role in row.roles"
                :key="role.id"
                :color="role.color"
              >
                {{ role.name }}
              </a-tag>
            </template>
            <template #isDeleted="{ row }">
              <a-tag :color="row.deletedAt ? 'red' : 'green'">
                {{ row.deletedAt ? '已删除' : '未删除' }}
              </a-tag>
            </template>

            <template #action="{ row }">
              <a-button size="small" type="link" @click.stop="handleEdit(row)">
                查看
              </a-button>
              <a-button
                danger
                size="small"
                type="link"
                @click.stop="handleDelete([row])"
              >
                删除
              </a-button>
            </template>
          </Grid>
        </div>
      </a-col>
    </a-row>
  </Page>
</template>

<style lang="scss" scoped>
.active {
  color: #2d8cf0;
  background: #f0faff;

  :deep(.ant-list-item-meta-title) {
    color: #2d8cf0 !important;
  }

  :deep(.ant-list-item-meta-description) {
    color: #2d8cf0 !important;
  }

  &:hover {
    background: #f0faff;
  }
}

:deep(.ant-tabs-nav-wrap) {
  justify-content: center;
}
</style>
